<template>
  <div class="floatBtn">

    <!-- <el-tooltip effect="dark" content="意见反馈" placement="left"> -->
      <!-- <div class="feedback" @click="feedbackVisible = true">
        <i class="iconfont iconBackupoffeedback"></i>
      </div> -->
    <!-- </el-tooltip> -->

    <el-button size="mini" round class="headerBtn" @click="feedbackVisible = true">
      <el-badge hidden>
        <i class="iconfont iconyijianfankui"></i>
      </el-badge>
    </el-button>

    <el-dialog :visible.sync="feedbackVisible" class="floatBtnDialog" :append-to-body="true">
      <div slot="title">
        <p>意见反馈</p>
      </div>
      <el-form :model="form" :rules="rules" ref="form" size="small" label-width="80px" v-loading="loading">
        <el-form-item label="主题" prop="title">
          <el-input v-model="form.title" placeholder="请输入主题" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" type="textarea" placeholder="请输入内容" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="loading" class="greenBtn" size="mini" @click="submitFeedback">提交</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'feedback',
  data() {
    return {
      loading: false,
      feedbackVisible: false,
      form: {
        title: '',
        content: '',
        phone: '',
        person: '',
        type: 0,
      },
      rules: {
        title: [
          { required: true, message: '请输入主题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    ...mapActions([
      'postFeedback',
    ]),
    submitFeedback() {
      this.$refs['form'].validate(async (valid) => {
        if(valid) {
          this.loading = true
          this.form.phone = this.userInfo.user.phone
          this.form.person = this.userInfo.user.username
          const result = await this.postFeedback(this.form)
          if(result.message !== 'success') {
            this.$notify({
              type: 'warning',
              title: '提示',
              message: result.info,
            })
          }else {
            this.$notify({
              type: 'success',
              title: '成功',
              message: '提交成功！！',
            })
            this.$refs['form'].resetFields();
            this.feedbackVisible = false
          }
          this.loading = false
          
        }else {
          return false;
        }
      })
    }
  },
  computed: {
    ...mapGetters({
      feedbackList: 'getFeedbackList',
      userInfo: 'getUserInfo',
    })
  }
}

</script>
<style scoped>
.floatBtn {
  /* position: absolute;
  top: -84px;
  right: 4%;
  z-index: 4;
  transition: .3s ease; */
}
.feedback {
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  box-shadow: 1px 1px 10px 0px #828282;

  cursor: pointer;
  transition: .3s ease-in-out;
}
.feedback:hover {
  background-color: #4eb2ff;
  color: #fff;
}
.feedback:hover i {
  color: #fff;
}
.feedback .icon {
  font-size: 20px;
}
.floatBtn .headerBtn {
  padding: 4px 5px;
  background: transparent;
  border-color: transparent;
  color: #ffffff;
}
</style>
<style>
/* .floatBtnDialog .el-dialog__header {
  background-image: linear-gradient(90deg, 
    #4eb2ff 0%, 
    #0b69cb 100%
  ), 
  linear-gradient( 
    #1e87f0,
    #1e87f0
  );
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
}
.floatBtnDialog .el-dialog__headerbtn {
  top: 12px;
}
.floatBtnDialog .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
} */
</style>